<template>
	<view v-if="result">
		<view v-if="type == 'question'" class="lego-card">
			<u--text text="参考答案:" color="#999"></u--text>
			<view class="content">
				<u-parse :content="analyse ? analyse : '无'"></u-parse>
			</view>
		</view>
		<view v-else :class="[correct ? 'lego-card-success' : 'lego-card-error']">
			<u--text v-if="correct" text="回答正确" size="20" type="success" bold></u--text>
			<u--text v-else text="回答错误" size="20" type="error" bold></u--text>
			<view class="answer">
				<view class="answer__contain">
					<u--text text="正确答案:" color="#999"></u--text>
					<view class="content">
						<u--text :text="correctAnswer"></u--text>
					</view>
				</view>
				<u-line direction="col" color="#999" length="auto" margin="0rpx 15rpx"></u-line>
				<view class="answer__contain">
					<u--text text="您的答案:" color="#999"></u--text>
					<view class="content">
						<u--text :text="answer"></u--text>
					</view>
				</view>
			</view>
			<view class="analyse">
				<u--text text="答案解析:" color="#999"></u--text>
				<view class="content">
					<u-parse :content="analyse ? analyse : '无'"></u-parse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: String,
			require: true
		},
		result: String,
		answerList: {
			type: Array,
			require: true
		},
		correctAnswerList: {
			type: Array,
			require: true
		},
		analyse: String
	},
	computed: {
		answer() {
			if (this.answerList) {
				return this.answerList.join(',')
			}
			return ''
		},
		correctAnswer() {
			if (this.correctAnswerList) {
				return this.correctAnswerList.join(',')
			}
			return ''
		},
		correct() {
			return this.result === 'correct'
		}
	}
}
</script>

<style lang="scss" scoped>
	.lego-card-error {
		padding: 20rpx 40rpx;
		position: relative;
		margin: 20rpx;
		background-color: $uni-bg-color;
		border-radius: $uni-border-radius-infos;
		box-shadow: 0rpx 2rpx 10rpx 2rpx rgba(255, 0, 0, 0.2);
	}
	.lego-card-success {
		padding: 20rpx 40rpx;
		position: relative;
		margin: 20rpx;
		background-color: $uni-bg-color;
		border-radius: $uni-border-radius-infos;
		box-shadow: 0rpx 2rpx 10rpx 2rpx rgba(90, 199, 37, 0.3);
	}
	.answer {
		display: flex;
		border-bottom: 1rpx solid $uni-text-color-disable;
		&__contain {
			flex: 1;
			padding: 20rpx 0rpx;
		}
	}
	.analyse {
		padding-top: 20rpx;
	}
	.content {
		padding-top: 10rpx;
	}
</style>